<template>
	<view class="t-flex">
		<view class="item t-flex" v-for="item,index in options" :key="index" @click="disabled?'':model = item.value">
			<view class="radio t-flex center" :class="{'active':model == item.value}">
				<i class="iconfont icon-dui"></i>
			</view>
			<text class="c3">{{item.name}}</text>
		</view>
	</view>

</template>

<script setup>
	import { computed } from 'vue';
		
		
	let emit = defineEmits(['update:modelValue'])
	
	let props = defineProps({
		modelValue:{
			type:String,
			default:''
		},
		options:{
			type:Array,
			default:[]
		},
		disabled:{
			type:Boolean,
			default:false
		}
	})
	
	
	let model = computed({
		get(){
			return props.modelValue
		},
		set(val){
			emit('update:modelValue',val)
		}
	})
	
	
</script>

<style scoped lang="scss">
	.radio{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2px solid #e5e5e5;
		color: #fff;
		margin-right: 15rpx;
		transition: all 200ms ; 
	}
	.item{
		margin-left: 20rpx;
	}
	.radio.active{
		background-color: $main-color;
		border-color: $main-color;
	}
	
</style>